<template>
  <view>
    <view class="steps-box">
      <up-steps class="steps-x" :current="2" activeColor="#00D1B6" inactiveColor="#86909C">
        <up-steps-item title="开始热身" />
        <up-steps-item title="开始运动" />
        <up-steps-item title="开始拉伸" />
      </up-steps>
    </view>
    <view class="wrap">
      <view v-if="!finishSport">
        <view
          class="sports-list"
          :style="{
            height: todayDate === options.date ? `calc(100vh - 200rpx)` : `calc(100vh - 90rpx)`
          }"
        >
          <view class="spors-item" v-for="(item, index) in sportTaskList" :key="index">
            <view class="sports-img-box" @tap="playVideo(item)">
              <image class="sports-img" :src="item.coverUrl || ''" mode="scaleToFill" />
              <image
                class="sports-img-icon"
                src="https://ainengli.meilianshuke.com/jkhx/common/sports-play-icon.png"
                mode="scaleToFill"
              />
            </view>
            <view>
              <view class="sports-name">
                <text class="sports-label">{{ item.sportName }}</text>
              </view>
              <view class="sports-cycle">
                <text class="sports-text sports-num">{{ item.duration }}</text>
                <text class="sports-text">s</text>
              </view>
            </view>
          </view>
        </view>
        <view class="fixed" @tap="nextSport" v-if="todayDate === options.date && options.hasFinish !== '1'">
          <button class="fix-btn">完成运动</button>
        </view>
      </view>

      <view class="sports-result" v-else>
        <view class="sports-result-content">
          <image
            class="sports-result-desc"
            src="https://ainengli.meilianshuke.com/jkhx/common/sports-result-desc.png"
            mode="scaleToFill"
          />
          <text class="sports-desc"> 恭喜你，完成了拉伸动作！ </text>
        </view>
        <view class="sprots-btn-box" @tap="toSportsPlan">
          <button class="fix-btn">回到运动方案</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, reactive, onMounted, computed } from 'vue'
import {
  getSportsPlanDetail,
  getSportsVideo,
  getDayOfWeek,
  completeSportsPlan
} from './sportsPlan.api'
import { parseTime, throttle } from '@/utils/tools'

const finishSport = ref(false)
const sportTaskList = ref<any>([])
const options = reactive({
  date: '',
  taskId: '',
  sportType: '',
  hasFinish: 0,
  sportId: '',
  planId: ''
})
const todayDate = parseTime(new Date(), '{y}-{m}-{d}')
const userInfo = ref()

const btnText = computed(() => {
  if (todayDate === options.date && options.hasFinish !== '1') {
    return '开始运动'
  } else {
    return ''
  }
})

onLoad((option) => {
  if (option) {
    options.date = option.date
    options.taskId = option.taskId
    options.sportType = option.sportType
    options.hasFinish = option.hasFinish
    options.sportId = option.sportId
    options.planId = option.planId
  }
})

onShow(() => {
  sportTaskList.value = []
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  getSportsPlanDetail({
    taskId: options.taskId
  }).then((res: any) => {
    const data = res.data.filter((vo) => vo.sportType === '4') // 拉身

    if (data.length) {
      const sportIds = data.map((vo) => vo.sportId)
      getSportsVideo(sportIds).then((res) => {
        sportTaskList.value = data.map((vo) => {
          return {
            ...vo,
            coverUrl: res.data[vo.sportId] ? res.data[vo.sportId][0].coverUrl : '',
            videoList: res.data[vo.sportId] ? res.data[vo.sportId] : []
          }
        })
      })
    }
  })
})

const playVideo = (data) => {
  const list = encodeURIComponent(JSON.stringify(data.videoList))
  if (data.videoList.length) {
    uni.navigateTo({
      url: `/module/src/pages/sports/video/index?source=warmUp&list=${list}`
    })
  } else {
    uni.showToast({
      title: '暂无视频',
      icon: 'none'
    })
  }
}

const nextSport = throttle(() => {
  saveSports()
}, 1000)

const saveSports = () => {
  const taskIds = sportTaskList.value.map((vo) => vo.taskDetailId)
  const data = sportTaskList.value.map((vo) => {
    return {
      empi: vo.empi,
      taskId: vo.taskId,
      taskDetailId: vo.taskDetailId,
      sportType: vo.sportType,
      sportId: vo.sportId,
      sportName: vo.sportName,
      duration: vo.duration,
      actionNum: vo.actionNum
    }
  })
  completeSportsPlan(taskIds).then((result) => {
    getDayOfWeek({ empi: userInfo.value.empi }).then((res) => {
      if (res.data == 0) {
        uni.redirectTo({
          url:
            '/module/src/pages/sports/feedback?sportsId=' +
            options.sportId +
            '&patPlanId=' +
            options.planId +
            '&sportsType=' +
            options.sportType
        })
      } else if (res.data == 1) {
        uni.redirectTo({
          url: `/module/src/pages/sports/sportsQuestionnaire/feedback`
        })
      } else if (res.data == 2) {
        uni.navigateBack()
        // uni.navigateTo({ url: '/module/src/pages/sports/sportsPlan/index' })
      }
    })
  })
}

const toSportsPlan = () => {
  uni.navigateBack()
  // uni.redirectTo({
  //   url: `/module/src/pages/sports/sportsPlan/index`
  // })
}
</script>
<style lang="scss" scoped>
.steps-box {
  background: #fff;
  padding: 16px 0;

  :deep(.u-text__value--content) {
    color: #86909c;
  }

  :deep(.u-text__value--main) {
    color: #00d1b6;
  }
  ::v-deep .u-steps-item__line {
    left: 62% !important;
    width: 76% !important;
    height: 1rpx !important;
    background-color: #e5e6eb !important;
  }
}

.wrap {
  padding: 32rpx 32rpx 188rpx 32rpx;
  position: relative;
  height: calc(100vh - 118rpx);

  .sports-list {
    width: 100%;
    height: calc(100vh - 200rpx);
    overflow: hidden auto;

    .spors-item {
      width: 100%;
      height: 224rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 32rpx;
      display: flex;
      flex-direction: row;

      .sports-img-box {
        width: 240rpx;
        height: 160rpx;
        margin-right: 32rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .sports-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          border-radius: 12rpx;
        }

        .sports-img-icon {
          width: 47rpx;
          height: 47rpx;
          z-index: 2;
        }
      }

      .sports-name {
        margin-bottom: 16rpx;
        .sports-label {
          font-weight: 600;
          font-size: 36rpx;
          color: #222222;
        }
      }

      .sports-text {
        font-weight: 500;
        font-size: 30rpx;
        color: #666;
      }
      .sports-num {
        color: #222;
        font-weight: 600;
      }
    }

    .spors-item:last-child {
      margin-bottom: 0;
    }
  }
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background: #fff;

  .fix-btn {
    width: 100%;
    font-size: 32rpx;
    font-weight: 700;
    color: #fff;
    background: #00d1b6;
    border-radius: 44rpx;
  }
}

.sports-result {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .sprots-btn-box {
    width: 100%;
    height: 88rpx;
    margin-top: 134rpx;
    padding: 0 96rpx;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}

.sports-result-content {
  display: flex;
  justify-content: center;
  width: 622rpx;
  height: 304rpx;
  flex-direction: column;
  margin-top: 110rpx;
  align-items: center;
  .sports-result-desc {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 16rpx;
  }

  .sports-desc {
    font-weight: 600;
    font-size: 40rpx;
    color: #222222;
  }
}
</style>
